import React from "react";
import { StyleProp, StyleSheet, View, ViewProps } from "react-native";
import rpx from "@/utils/rpx";
import useColors from "@/hooks/useColors";
import { TouchableOpacity } from "react-native-gesture-handler";
import Icon from "@/components/base/icon.tsx";

interface ICheckboxProps {
    checked?: boolean;
    onPress?: () => void;
    style?: StyleProp<ViewProps>;
}

const slop = rpx(24);

export default function Checkbox(props: ICheckboxProps) {
    const { checked, onPress, style } = props;
    const colors = useColors();

    const innerNode = (
        <View
            style={[
                styles.container,
                checked
                    ? {
                        backgroundColor: colors.primary,
                        borderColor: colors.primary,
                    }
                    : {
                        borderColor: colors.text,
                    },
                style,
            ]}>
            {checked ? (
                <Icon name="check" color={colors.appBarText} size={rpx(34)} />
            ) : null}
        </View>
    );

    return onPress ? (
        <TouchableOpacity
            hitSlop={{
                left: slop,
                right: slop,
                top: slop,
                bottom: slop,
            }}
            onPress={onPress}>
            {innerNode}
        </TouchableOpacity>
    ) : (
        innerNode
    );
}

const styles = StyleSheet.create({
    container: {
        width: rpx(36),
        height: rpx(36),
        borderRadius: rpx(2),
        borderWidth: rpx(1),
        alignItems: "center",
        justifyContent: "center",
    },
});
